'use strict';
const { parseParams, parseJsObject } = require('../lib/utils');
const _ = require('lodash');

module.exports = function chart_plugin(md) {
    let chart_id = 0;
    md.renderer.rules.fence_custom.chart = function (params, tokens, idx) {
        const options = parseParams(params, {
            labelName: 'label',
            valueName: 'value',
            axisLabelColor: 'red',
            itemColorTop: 'gold',
            itemColorBottom: '#d70412',
        });
        let content = tokens[idx].content.split('\n').filter(o => !!o).map(o => `${o.trim()}`).join('');

        let chartOption;
        if (options.type === 'bar') {
            options.list = parseJsObject(content);
            chartOption = `{
                title: { text: '${options.title}', left: 'center' },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        'show': false,
                    },
                    axisLabel: {
                        color: '${options.axisLabelColor}',
                        fontSize: 12,
                        rotate: 10,
                    },
                    data: ${JSON.stringify(_.map(options.list, options.labelName))},
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    type: 'bar',
                    barWidth: 20,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'insideTop',
                            textStyle: {
                                color: '#fff',
                                fontSize: 14,
                            },
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '${options.itemColorTop}',
                            }, {
                                offset: 1,
                                color: '${options.itemColorBottom}',
                            }]),
                            barBorderRadius: [5, 5, 0, 0],
                        },
                    },
                    data: ${JSON.stringify(_.map(options.list, options.valueName))},
                }]
            }`;
        } else if (options.type === 'line') {
            options.list = parseJsObject(content);
            chartOption = `{
                title: { text: '${options.title}', left: 'center' },
                xAxis: {
                    type: 'category',
                    axisTick: {
                        'show': false,
                    },
                    axisLabel: {
                        color: '${options.axisLabelColor}',
                        fontSize: 12,
                        rotate: 10,
                    },
                    data: ${JSON.stringify(_.map(options.list, options.labelName))},
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'line',
                        smooth: false,
                        symbol: 'circle',
                        symbolSize: 5,
                        showSymbol: true,
                        lineStyle: {
                            normal: {
                                color: 'gold',
                                width: 2,
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'insideTop',
                                textStyle: {
                                    color: 'red',
                                    fontSize: 14,
                                },
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255, 215, 0, 0.8)',
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(215, 4, 18, 0.1)',
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: 'gold',
                                borderColor: 'rgba(221, 220, 107, .1)',
                                borderWidth: 12,
                            },
                        },
                        data: ${JSON.stringify(_.map(options.list, options.valueName))},
                    }
                ]
            }`;
        } else if (options.type === 'pie') {
            options.list = parseJsObject(content);
            chartOption = `{
                title: { text: '${options.title}', left: 'center' },
                legend: {
                    data:  ${JSON.stringify(_.map(options.list, options.labelName))},
                    top: 'bottom',
                },
                series: [{
                    type: 'pie',
                    radius: ['0%', '70%'],
                    center: ['50%', '50%'],
                    data: ${JSON.stringify(_.map(options.list, o=>({ name: o[options.labelName],  value: o[options.valueName] })))},
                    label: {
                        normal: {
                            show: true,
                            position: 'inner',
                            textStyle: {
                                fontWeight: 300,
                                fontSize: 14,
                                color: '#fff',
                            },
                            formatter: '{c}',
                        },
                    },
                }],
            }`;
        } else {
            chartOption = content;
        }

        chart_id++;
        return `
        <div id="mdoc_chart_${chart_id}" style="width: 600px;height:400px;"></div>
        <script>$(document).ready(function(){echarts.init(document.getElementById('mdoc_chart_${chart_id}')).setOption(${chartOption})})</script>
        `;
    };
};
